<template>
  <div>
    <div class="xqAll">
      <!-- 酒店基础信息 -->
      <div class="jcMassage massage pageViewBox" :class="{ activeStyle: open == true, noActiveStyle: open == false }">
        <div class="pageTitle">
          <span @click="vbb">酒店基础信息</span>
          <div class="zheDieBtn" @click="spread(!open)">
            <span>折叠</span>
            <!-- <i class="t-icon-arrow-down icon downIcon"></i>
            <i class="t-icon-arrow-up icon openIcon"></i> -->
          </div>
        </div>

        <div class="mainBox">
          <JDForm
            ref="systemForm1"
            :formLabel="systemFormDataText"
            :propFormVal="systemFormData"
            :option="optionVal"
            :editType="editType"
          >
            <!--酒店门头照 -->
            <div slot="hotelFasciaPhoto" class="soltClass">
              <span>酒店门头照</span>
              <div class="imageClass">
                <ImageCom v-for="(item, i) in imagePic1" :key="`s${i}`" class="picClass" :pic="item"></ImageCom>
              </div>
            </div>
            <!--酒店大厅照 -->
            <div slot="hotelLobbyPhoto" class="soltClass">
              <span>酒店大厅照</span>
              <div class="imageClass">
                <ImageCom v-for="(item, i) in imagePic2" :key="`s${i}`" class="picClass" :pic="item"></ImageCom>
              </div>
            </div>
          </JDForm>
        </div>
      </div>
      <!-- 签约信息 -->
      <div class="qyMassage massage pageViewBox" :class="{ activeStyle: qy == true, noActiveStyle: qy == false }">
        <div class="pageTitle">
          <span>签约信息</span>
          <!-- 折叠按钮 -->
          <div class="zheDieBtn" @click="qySpread(!qy)">
            <span>折叠</span>
            <!-- <i class="t-icon-arrow-down icon downIcon"></i>
            <i class="t-icon-arrow-up icon openIcon"></i> -->
          </div>
        </div>

        <div class="mainBox">
          <JDForm
            ref="systemForm2"
            :formLabel="aptitudeMassageDataText"
            :propFormVal="aptitudeMassageData"
            :option="optionVal"
            :editType="editType"
          >
            <!-- //营业执照照片 -->
            <div slot="businessLicensePhoto" class="soltClass" slot-scope="scope">
              <span>营业执照照片</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
            <!-- //特征行业资格证 -->
            <div
              slot="hotelSettleSupplementaryQualificationInfoVO_supplementarySpecialIndustryCertificate"
              class="soltClass"
              slot-scope="scope"
            >
              <span>特种行业资格证</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
            <!-- //消防证 -->
            <div
              slot="hotelSettleSupplementaryQualificationInfoVO_supplementaryQualificationFireCertificate"
              class="soltClass"
              slot-scope="scope"
            >
              <span>消防证</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
            <!-- //卫生许可证 -->
            <div
              slot="hotelSettleSupplementaryQualificationInfoVO_supplementaryQualificationHealthLicense"
              class="soltClass"
              slot-scope="scope"
            >
              <span>卫生许可证</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
            <!-- //食品经营许可证 -->
            <div
              slot="hotelSettleSupplementaryQualificationInfoVO_supplementaryQualificationFoodBusinessLicense"
              class="soltClass"
              slot-scope="scope"
            >
              <span>食品经营许可证</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
          </JDForm>
        </div>
      </div>
      <!-- 签约资质信息 -->
      <div class="qyMassage massage pageViewBox" :class="{ activeStyle: zZ == true, noActiveStyle: zZ == false }">
        <div class="pageTitle">
          <span>签约资质信息</span>
          <!-- 折叠按钮 -->
          <div class="zheDieBtn" @click="zzSpread(!zZ)">
            <span>折叠</span>
            <!-- <i class="t-icon-arrow-down icon downIcon"></i>
            <i class="t-icon-arrow-up icon openIcon"></i> -->
          </div>
        </div>
        <div class="mainBox">
          <div>
            <JDForm
              ref="qyform1"
              :formLabel="aptitudeQualificationMassageText"
              :propFormVal="aptitudeQualificationMassage"
              :option="optionVal"
              :editType="editType"
            >
              <!--上传营业执照类型照片 -->
              <div slot="businessLicenseInfoVO_businessLicensePhoto" class="soltClass" slot-scope="scope">
                <span>上传营业执照类型照片</span>
                <div class="imageClass">
                  <ImageCom class="picClass" :pic="scope.itemValue"></ImageCom>
                </div>
              </div>

              <!--签约人证件照片 -->
              <div slot="settlePersonalIdInfoVO_idFrontPhoto" class="soltClass">
                <span>签约人证件照片</span>
                <div class="imageClass">
                  <ImageCom v-for="(item, i) in imagePic8" :key="`b${i}`" class="picClass" :pic="item"></ImageCom>
                </div>
              </div>
              <!--非身份证照片 -->
              <div slot="settlePersonalIdInfoVO_nonIdPhoto" class="soltClass" slot-scope="scope">
                <span>签约人证件照片</span>
                <div class="imageClass">
                  <ImageCom class="picClass" :pic="scope.itemValue"></ImageCom>
                </div>
              </div>
              <!--委托书照片 -->
              <div slot="contractAuthorizationLetterPhoto" class="soltClass" slot-scope="scope">
                <span>委托书照片</span>
                <div class="imageClass">
                  <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
                </div>
              </div>
              <!--签约法人证件照片 -->
              <div slot="authorizedSignerInfoVO_idFrontPhoto" class="soltClass">
                <span>签约法人证件照片</span>
                <div class="imageClass">
                  <ImageCom v-for="(item, i) in imagePic9" :key="`i${i}`" class="picClass" :pic="item"></ImageCom>
                </div>
              </div>
              <!--非身份证照片 -->
              <div slot="authorizedSignerInfoVO_nonIdPhoto" class="soltClass" slot-scope="scope">
                <span>签约人证件照片</span>
                <div class="imageClass">
                  <ImageCom class="picClass" :pic="scope.itemValue"></ImageCom>
                </div>
              </div>
            </JDForm>
          </div>
        </div>
      </div>
      <!-- 结算收款信息 -->
      <div class="jsMassage massage pageViewBox" :class="{ activeStyle: sk == true, noActiveStyle: sk == false }">
        <div class="pageTitle">
          <span>结算收款信息</span>
          <!-- 折叠按钮 -->
          <div class="zheDieBtn" @click="skSpread(!sk)">
            <span>折叠</span>
            <!-- <i class="t-icon-arrow-down icon downIcon"></i>
            <i class="t-icon-arrow-up icon openIcon"></i> -->
          </div>
        </div>
        <!-- 对私账户结算 -->
        <div class="mainBox">
          <JDForm
            ref="systemForm3"
            :formLabel="settlementMassageDataText"
            :propFormVal="settlementMassageData"
            :option="optionVal"
            :editType="editType"
          >
            <!--开户用证件照(身份证) -->
            <div slot="hotelSettlePersonalIdInfoVO_idFrontPhoto" class="soltClass">
              <span>开户用证件照</span>
              <div class="imageClass">
                <ImageCom v-for="(item, i) in imagePic10" :key="`b${i}`" class="picClass" :pic="item"></ImageCom>
              </div>
            </div>
            <!--非身份证照片 -->
            <div slot="hotelSettlePersonalIdInfoVO_nonIdPhoto" class="soltClass" slot-scope="scope">
              <span>开户用证件照</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
            <!--银行卡照片 -->
            <div slot="hotelSettleSettlementBankAccountInfoVO_bankCardPhoto" class="soltClass" slot-scope="scope">
              <span>银行卡照片</span>
              <div class="imageClass">
                <ImageCom v-if="scope.itemValue" class="picClass" :pic="scope.itemValue"></ImageCom>
              </div>
            </div>
          </JDForm>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="buttonBox">
        <button class="nobutton" @click="restAll">拒绝</button>
        <button class="yesbutton" @click="visibles = true">通过</button>
      </div>
    </div>
    <!-- 弹出框内容 -->
    <div class="jump">
      <!-- 审核未通过 -->
      <t-dialog :visible.sync="canNotDiaOpen" width="70%" header="拒绝通过审核">
        <div class="diaBody">
          <Person ref="person" v-if="massageAllData && flag" :personData="massageAllData"></Person>
        </div>
        <span slot="footer" class="dialog-footer">
          <t-button @click="canNotDiaOpen = false">取 消</t-button>
          <t-button @click="canNotMakeSure">确 定</t-button>
        </span>
        <t-dialog
          theme="info"
          header="提示"
          body="请至少选择一项驳回理由"
          :visible.sync="visible1"
          @confirm="onConfirm"
          :cancelBtn="null"
        />
      </t-dialog>
      <!-- 审核通过弹出框 -->
    </div>
    <div class="okPass">
      <!-- 通过弹出 -->
      <t-dialog :visible.sync="visibles" width="40%" header="审核通过">
        <PassApitude></PassApitude>
        <span slot="footer" class="dialog-footer">
          <t-button @click="visibles = false">取 消</t-button>
          <t-button @click="enterRefuse">确 定</t-button>
        </span>
      </t-dialog>
    </div>
  </div>
</template>
<script>
import ImageCom from '@/components/imageCom.vue';
import JDForm from '@/components/JDForm.vue';
import hotelApi from '@/api/jiekou';
import Person from './person.vue';
import PassApitude from './passAptitude.vue';
import { optionVal } from '@/selectOption/index';
import {
  aptitudeMassageData,
  systemFormDataText,
  systemFormData,
  aptitudeMassageDataText,
  aptitudeQualificationMassage,
  aptitudeQualificationMassageText,
  settlementMassageData,
  settlementMassageDataText,
} from './index';
export default {
  data() {
    return {
      rzopen: false,
      visible1: false,
      canNotDiaOpen: false,
      visibles: false,
      flag: false,
      selectLy: false,
      massageAllData: {},
      // 判断是否折叠起来,默认展开
      zZ: true,
      sk: true,
      qy: true,
      open: true,
      rowKey: 'id',
      editType: this.$store.state.backMassage.editType,
      // 判断暂存
      systemFormDataText: this.Clone(systemFormDataText),
      aptitudeMassageData: this.Clone(aptitudeMassageData), //酒店基础信息
      systemFormData: this.Clone(systemFormData), //签约信息
      aptitudeMassageDataText,
      aptitudeQualificationMassage,
      aptitudeQualificationMassageText,
      settlementMassageData,
      settlementMassageDataText,
      optionVal,
      imagePic1: [], //酒店门头照数组
      imagePic2: [], //酒店大厅照数组
      imagePic3: [], //上传营业执照照片
      imagePic4: [], //
      imagePic5: [], //
      imagePic6: [], //
      imagePic7: [], //
      imagePic8: [], //
      imagePic9: [], //
      imagePic10: [], //
      imagePic11: [], //
      imagePic12: [], //
      imagePic13: [], //

      //  审核记录表格表头
      aptitudeRecordTable: [
        {
          colKey: 'auditUser',
          title: '审核人',
          width: 250,
          ellipsis: true,
        },
        {
          colKey: 'auditDate',
          title: '审核时间',
          width: 250,
          ellipsis: true,
        },
        {
          colKey: 'auditResult',
          title: '审核结果',
          width: 250,
          ellipsis: true,
        },
        {
          colKey: 'reasonsRefusal',
          title: '拒绝理由',
          width: 250,
          ellipsis: true,
        },
        {
          colKey: 'supplRefusal',
          title: '补充理由',
          width: 250,
          ellipsis: true,
        },
      ],
      //审核记内容
      tableDataList: [],
      // 用户提交时间
      gitTime: '',
      // 接收发请求获取的参数信息
      aptitudeText: [
        {
          rediver: '',
          rejectReason: '',
          supplementReason: '',
        },
      ],
    };
  },
  components: {
    JDForm,
    ImageCom,
    Person,
    PassApitude,
  },
  methods: {
    // 进入页面第一次请求数据
    detalisMassage() {
      let hotelId = this.$store.state.backMassage.idMassage;
      hotelApi.detailQuery(hotelId).then((res) => {
        let massageAll = res.data;
        this.massageAllData = { ...massageAll };
        // 基础信息
        for (let i in massageAll) {
          this.systemFormData[i] = massageAll[i];
        }
        for (let i = 1; i <= 5; i++) {
          if (this.systemFormData[`hotelFasciaPhoto${i}`] && this.systemFormData[`hotelFasciaPhoto${i}`] != '') {
            this.imagePic1.push(this.systemFormData[`hotelFasciaPhoto${i}`]);
          }
        }
        for (let i = 1; i <= 5; i++) {
          if (this.systemFormData[`hotelLobbyPhoto${i}`] && this.systemFormData[`hotelLobbyPhoto${i}`] != '') {
            this.imagePic2.push(this.systemFormData[`hotelLobbyPhoto${i}`]);
          }
        }
        // 签约信息
        for (let i in this.aptitudeMassageData) {
          this.aptitudeMassageData[i] =
            massageAll.hotelContractInformationVO[i] === null ||
            massageAll.hotelContractInformationVO[i] === 'undefined'
              ? null
              : massageAll.hotelContractInformationVO[i];
        }
        if (this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO) {
          if (
            this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO.supplementarySpecialIndustryCertificate
          ) {
            this.imagePic4.push(
              this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
                .supplementarySpecialIndustryCertificate,
            );
          }
          if (
            this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
              .supplementaryQualificationFireCertificate
          ) {
            this.imagePic5.push(
              this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
                .supplementaryQualificationFireCertificate,
            );
          }
          if (
            this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO.supplementaryQualificationHealthLicense
          ) {
            this.imagePic6.push(
              this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
                .supplementaryQualificationHealthLicense,
            );
          }
          if (
            this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
              .supplementaryQualificationFoodBusinessLicense
          ) {
            this.imagePic7.push(
              this.aptitudeMassageData.hotelSettleSupplementaryQualificationInfoVO
                .supplementaryQualificationFoodBusinessLicense,
            );
          }
          this.flag = true;
        }

        //签约资质信息
        for (let i in massageAll.hotelContractQualificationInformationVO) {
          this.aptitudeQualificationMassage[i] = massageAll.hotelContractQualificationInformationVO[i];
        }
        this.imagePic8.push(this.aptitudeQualificationMassage.idBackPhoto);
        this.imagePic8.push(this.aptitudeQualificationMassage.idFrontPhoto);
        this.imagePic9.push(this.aptitudeQualificationMassage.sqidFrontPhoto);
        this.imagePic9.push(this.aptitudeQualificationMassage.sqidBackPhoto);

        //签约资质/公司法人不一致
        if (massageAll.hotelContractQualificationInformationVO.isContractBusinessLicenseSameAsHotel == 1) {
          for (let i in massageAll.hotelContractQualificationInformationVO.businessLicenseInfoVO) {
            this.aptitudeQualificationMassage[i] =
              massageAll.hotelContractQualificationInformationVO.businessLicenseInfoVO[i];
          }
        }

        //公司法人授权签约
        for (let i in massageAll.hotelContractQualificationInformationVO.authorizedSignerInfoVO) {
          this.aptitudeQualificationMassage[`sq${i}`] =
            massageAll.hotelContractQualificationInformationVO.authorizedSignerInfoVO[i];
        }
        for (let i in massageAll.hotelContractQualificationInformationVO.settlePersonalIdInfoVO) {
          this.aptitudeQualificationMassage[i] =
            massageAll.hotelContractQualificationInformationVO.settlePersonalIdInfoVO[i];
        }
        // 结算信息
        // 共有
        let sett = massageAll.hotelSettlementReceiptInformationVO;
        for (let i in sett) {
          this.settlementMassageData[i] = sett[i];
        }
        if (sett.settlementAccountType === null) {
          console.log('财务账户类型值为空');
        }
        if (sett.hotelSettlePersonalIdInfoVO) {
          this.imagePic10.push(sett.hotelSettlePersonalIdInfoVO.idFrontPhoto);
          this.imagePic10.push(sett.hotelSettlePersonalIdInfoVO.idBackPhoto);
        }
        if (sett.hotelSettleSettlementBankAccountInfoVO) {
          this.imagePic13.push(sett.hotelSettleSettlementBankAccountInfoVO.bankCardPhoto);
        }
      });
    },
    //   查看更多
    lookMore() {},
    //  酒店基础信息展开页面
    spread(v) {
      this.open = !this.open;
    },
    vbb() {
      let aa = this.$refs.systemForm1.formVal;
    },
    //  签约信息展开页面
    qySpread(v) {
      this.qy = !this.qy;
    },
    zzSpread(v) {
      this.zZ = !this.zZ;
    },
    skSpread(v) {
      this.sk = !this.sk;
    },
    //拒绝的确定
    canNotMakeSure() {
      let aa = this.$refs.person.checkList;
      let inputMassage = this.$refs.person.inputText;
      let checkStr = [];
      for (let val in aa) {
        if (aa[val].length !== 0) {
          aa[val].forEach((v) => {
            checkStr.push(v);
          });
        }
      }
      checkStr = checkStr.join('|');
      if (checkStr.length != 0 || inputMassage != '') {
        let params = {
          hotelId: this.$store.state.backMassage.idMassage,
          auditStatus: 2,
          rejectReason: checkStr,
          supplementReason: inputMassage,
        };
        hotelApi.aptitudeBody(params).then((res) => {});
        this.canNotDiaOpen = false;
        this.$router.push('/enterManagement');
      } else {
        this.visible1 = true;
      }
    },
    onConfirm() {
      this.visible1 = false;
    },
    // 审核通过的确定
    enterRefuse() {
      this.visibles = false;
      let params = {
        hotelId: this.$store.state.backMassage.idMassage,
        auditStatus: 1,
        rejectReason: '通过',
      };
      hotelApi.aptitudeBody(params).then((res) => {
        this.$router.push('/enterManagement');
      });
    },
    //拒绝按钮
    restAll() {
      this.canNotDiaOpen = true;
    },
  },
  mounted() {
    if (this.$store.state.backMassage.idMassage) {
      this.detalisMassage();
    }
  },
};
</script>
<style lang="less" scoped>
.mainBox {
  padding-left: 16px;
}
.pageTitle {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 20px 0 0 16px !important;
  margin-bottom: 25px;
  height: 24px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 24px;
  text-align: left;
  .zheDieBtn {
    position: absolute;
    right: 0;
  }
}
::v-deep .t-col {
  width: 438px;
  .boxClass {
    .t-form__controls {
      border: none !important;
      margin-left: 40% !important;
    }
  }
  .t-form__item {
    margin-bottom: 24px !important;
    width: 438px;
    .t-form__label {
      text-align: left;
      width: 130px !important;
    }
    .t-form__controls {
      border: 1px solid #dcdcdc;
      margin-left: 30% !important;
      .t-form__controls-content {
        padding-left: 8px;
      }
    }
  }
  // 酒店门头照+大厅照
  .imgCalss {
    width: 1200px !important;
    .t-form__controls {
      margin-left: 0 !important;
      border: none;
      .t-form__controls-content {
        padding: 0 !important;
      }
    }
    .soltClass {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      span {
        width: 130px;
      }
      .imageClass {
        display: flex;
        flex-direction: row;

        .picClass {
          width: 157px !important;
          height: 157px !important;
          margin-right: 8px;
          .tdesign-demo-image-viewer__base {
            margin: 0 !important;
            width: 100%;
            height: 100%;
            border: none !important;
            border-radius: 3px;
            overflow: hidden;
            .tdesign-demo-image-viewer__ui-image--img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  //签约信息照片
  .qyxxCalss {
    .t-form__controls {
      margin-left: 0 !important;
      border: none;
      .t-form__controls-content {
        padding: 0 !important;
      }
      .soltClass {
        display: flex;
        flex-direction: row;
        span {
          width: 130px;
        }
        .imageClass {
          border-radius: 3px;
          width: 120px !important;
          height: 120px !important;
          .tdesign-demo-image-viewer__ui-image {
            width: 100%;
            height: 100%;
            .tdesign-demo-image-viewer__ui-image--img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .textClass {
    height: 32px;
    .t-form__label {
      //     white-space: wtap;
      // word-wrap: break-word;
      // word-break: break-all;
      line-height: 16px;
      white-space: pre-line;
    }
  }
}
.nobutton{
  width: 60px;
height: 32px;
background: #F93838;
border-radius: 3px 3px 3px 3px;
border:none;
color:#fff;
margin-right: 24px;
}
.yesbutton{
  width: 60px;
  height: 32px;
  background: #2BA471;
border-radius: 3px 3px 3px 3px;
border:none;
color:#fff;

}
</style>
